<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件示例</title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<!--
		Vue中使用组件的三大步骤:
		一、定义组件(创建组件)
		二、注册组件
		三、使用组件(写组件标签)
		
		一、如何定义一个组件?
			使用Vue.extend(options)创建，其中options和new Vue(options)是传入的那个options几乎一样,但也有点区别
			区别如下:
				1.el不要写,为什么?  最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器
				2.data必须写成函数,为什么？避免组件被复用时，数据存在引用关系.
			备注：使用template可以配置组件结构
		二、如何注册组件？
			1.局部注册：靠new Vue的时候传入components选项
			2.全局注册：靠Vue.component('组件名',组件)
		三、编写组件标签：
			<school></school>
		-->
		<div id="root">
			<hello></hello>
			<hr />
			<!-- 第三步:编写组件标签 -->
			<school></school>
			<school></school>
			<hr/>
			<student></student>
			
		</div>
		<hr/>
		<div id="root2">
			<hello></hello>
		</div>
		<script>
			Vue.config.productionTip = false;
			
			const school = Vue.extend({
				template:`
				<div>
					<h3>学校名称:{{name}}</h3>
					<h3>学校地址:{{address}}</h3>
					<button @click="showName">点我提示学校名</button>
				</div>
				`,
				data(){
					return {
						name:'星桥第一小学',
						address:'学成街'
					};
				},
				methods:{
					showName(){
						alert(this.name);
					}
				}
			});
			const student = Vue.extend({
				template:`
				<div>
					<h3>学生姓名:{{name}}</h3>
					<h3>学生性别:{{sex}}</h3>
					<h3>学生年龄:{{age}}</h3>
				</div>
				`,
				data(){
					return {
						name:'张三',
						sex:'男',
						age:22
					};
				}
			});
			
			const hello = Vue.extend({
				template:`
				<div>
					<h2>你好呀：{{name}}</h2>
				</div>
				`,
				data(){
					return {name:'王五'};
				}
			});
			// 全局注册组件
			Vue.component('hello',hello);
			
			new Vue({
				el:'#root',
				data:{
					msg:'你好呀'
				},
				components:{
					// 局部注册
					school,
					student
				}
			});
			new Vue({
				el:'#root2',
			});
		</script>
	</body>
</html>